<template>
	<view class="kind-continer" :style="{marginTop:topHeight+'px'}">
		
		
		<view class="kind-list">
			<view class="kind-list-item" @tap="goToProductList(item.id)" v-for="item in categoryList" :key="item.id">
				<view class="name">{{item.name}}</view>
				<image class="kind-list-item-img" :src="item.icon"></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {findCategory as findCategoryApi} from '@/api/home/index.js'
	export default {
		name:'Kind',
		data() {
			return {
				categoryList:[],//分类列表数据
				topHeight:0,
				
			}
		},
		onLoad(){
			this.topHeight=uni.getStorageSync('topHeight');
			this.getCategory();
		},
		methods: {
			//跳转到商品列表页
			goToProductList(id){
				uni.navigateTo({
					url:`./productList/productList?id=${id}`
				})
			},
			//获取分类列表
			getCategory(){
				findCategoryApi('1308336521604599809')
				.then(res=>{
					this.categoryList=res.data.category.children;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	//分类
	.kind-continer{
		height: 100%;
		background-color: #f1ece7;
		.kind-list{
			padding:0 30rpx 60rpx;
			overflow: hidden;
			&-item{
				display: flex;
				justify-content: space-between;
				overflow: hidden;
				height: 300rpx;
				margin-top: 30rpx;
				margin-bottom: 30rpx;
				border-radius: 30rpx;
				.name{
					flex: 1;
					background-color: #fff;
					font-size: 50rpx;
					font-weight: 700;
					color:#333;
					text-indent: 50rpx;
					line-height: 350rpx;
				}
				&-img{
					display: block;
					width:400rpx;
					height:100%;
					object-fit: contain;
					object-position: center;
				}
			}
		}
	}
</style>
